<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100vw;
      height: 100vh;
      background-image: url(./img/云的彼方\ 水上列车\ 湖\ 云\ 晚霞\ 星空\ 城市\ 动漫风景场景4k壁纸_彼岸图网.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;

      display: flex;
      justify-content: center;
      align-items: center;
    }

    .word {
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;

      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.5);
      background-color: rgba(255, 255, 255, 0.3);

      transition: all 1s;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="word">言</div>
  </div>
  <script>
    // 获取 box
    let box = document.querySelector('.box')
    // 获取 word
    let word = document.querySelector('.word')
    console.log(box, word);

    word.onclick = function (e) {
      // 更改 word 的宽度
      word.style.width = '600px'
      // 更改小圆角
      word.style.borderRadius = '40px'
      // fetch url , {}
      fetch('https://api.uixsj.cn/hitokoto/get?type=social&code=json', {
        method: 'GET'
      }).then(res => {
        console.log(res);
        if (res.status === 200) {
          let data = res.json()
          data.then(text => {
            console.log(text.content);
            word.innerHTML = text.content
          })
        }
      })
    }

    // 给 box 添加一个鼠标点击事件
    box.onclick = function (e) {
      console.log('box', e.target);
      // 阻止事件冒泡 当点击的是 box 时执行
      if (e.target !== word) {
        // 更改 word 的宽度
        word.style.width = '80px'
        // 更改小圆角
        word.style.borderRadius = '50%'
        // 将 word 内容改回到 言
        word.innerHTML = '言'
      }
    }

      // // 获取 box
      // let box = document.querySelector('.box');
      // // 获取 word
      // let word = document.querySelector('.word');

      // // 给 word 添加一个鼠标点击事件
      // word.onclick = function (e) {
      //   console.log('点击了');

      //   // 更改 word 的宽度
      //   word.style.width = '600px';
      //   // 更改小圆角
      //   word.style.borderRadius = '40px';
      //   // 发送 fetch 请求
      //   fetch('https://api.uixsj.cn/hitokoto/get?type=social&code=json', {
      //     method: 'GET',
      //   }).then(res => {
      //     console.log(res);
      //     // 如果请求成功
      //     if (res.status === 200) {
      //       // 拿到返回的Promise对象 用json格式
      //       let data = res.json();
      //       console.log('res.json()', data);
      //       // 拿到返回的内容
      //       data.then(text => {
      //         console.log(text.content);
      //         // 将获取到的内容添加到 word
      //         word.innerHTML = text.content;
      //       });
      //     } else {
      //       // 请求失败打印
      //       console.log('请求有问题出错了');
      //     }
      //   });
      // };

      // // 给 box 添加一个鼠标点击事件
      // box.onclick = function (e) {
      //   console.log('box被点击了');

      //   // 阻止事件冒泡 当点击的是 box 时执行
      //   if (e.target !== word) {
      //     console.log('进来了');
      //     // 更改 word 的宽度
      //     word.style.width = '80px';
      //     // 更改小圆角
      //     word.style.borderRadius = '50%';
      //     // 将 word 内容改回到 言
      //     word.innerHTML = `言`;
      //   }
      // };
  </script>
</body>

</html>